<template>
  <div class="file-view-single">
    <el-image :src="url" :preview-src-list="[url]"/>
  </div>
</template>

<script>
import {API_HOST, NGINX_HOST} from '@/constant'
export default {
  name: 'file-view-single',
  cnName: 'file-view-single',
  props: {
    src: String,
    isNginx: { // 使用服务器Nginx的代理
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      base: API_HOST
    }
  },
  methods: {},
  computed: {
    url() {
      if(this.src && this.src.indexOf('http') === 0) {
        return this.src
      }
      if(!this.isNginx) {
        return this.base + this.src
      }
      return NGINX_HOST + this.src
    }
  }
}
</script>

<style lang="scss" scoped>
.file-view-single {
  display: inline-block;
  margin-top: 10px;

  /deep/ {
    .el-image {
      height: 80px;
    }
    .el-image__error, .el-image__inner, .el-image__placeholder {
      max-width: 100%;
      max-height: 100%;
    }
  }
}
</style>
